<template>
  <div class="page">
    <!-- 轮播 -->
    <el-carousel :interval="5000" arrow="hover" height="547px">
      <el-carousel-item v-for="(item,index) in 3" :key='index'>
        <div class='carousel_img' :style='{backgroundImage:carousel}'></div>
      </el-carousel-item>
    </el-carousel>
    <!-- content -->
    <div class="yz_body">
      <div class="services">
        <h3>
          <span>我们的服务</span>
        </h3>
        <p class="services_p">我们为不同行业提供专业的装修服务</p>
        <!-- el-col -->
        <el-row :gutter="10">
          <el-col :md="24" :lg="12" v-for='item in 2' :key='item'>
            <div v-for='item in 2' class="services_box">
              <img :src='services.img' class="services_img">
              <div class="content">
                <h4>{{services.title}}</h4>
                <p>{{services.msg}}</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- about us -->
    <div class="yz_about">
      <el-row :gutter="0">
        <el-col :md="24" :lg="12" class="left_side" :style='{backgroundImage:aboutImg}'>
        </el-col>
        <el-col :md="24" :lg="12" class="right_side">
          <div class="about_us">
            <h2><router-link to="/page/about/about1" title="关于我们">关于我们</router-link></h2>
            <p> 装饰有限公司成立于1997年，是以家装为主，涉足商装、建材等相关产业的专业性装饰公司。具有施工、设计双乙级资质。通过多年的努力，在业内外形成了良好的口碑。公司先后荣获“全国住宅装饰装修行业自律诚信单位”、“住宅装饰装修优秀企业”、“住宅装饰装修示范优秀奖等多项殊荣，并多次在家居装饰设计大赛中获奖。 </p>
            <p> “优秀的设计、优良的工程、优质的服务”是的承诺，“创新力、凝聚力、想像力，为您打造新天地”是的口号。本着“价格透明化；施工标准化；工艺现代化；材料环保化；人员专业化；服务人性化”的六化原则，服务于每一位客户，致力打造客户满意的精品工程。在为您服务的是一个经过专业系统培训、时间经验丰富的团队，力求以专业的态度和一种持之以恒的精神完成每一个项目。公司汇集了各种设计流派且经验丰富的设计师，工艺精湛的施工队伍采用带薪制管理，全心全意为您构筑舒适温馨的家园。专业严谨的工程监理，随时监督工程质量，完善的服务体系，为您消除后顾之忧。</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- product -->
    <div class="yz_product">
      <div class="product_container">
        <h3>
          <span>热门项目</span>
        </h3>
        <p>我们有强大的服务团队，为企业提供一对一订制服务</p>
        <!-- 走马灯 -->
        <el-carousel :interval="4000" type="card">
          <el-carousel-item v-for="item in 3" :key="item">
            <div class="product_img">
              <img :src='carousel_2'>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="yz_news">
      <div class="news_container">
        <h3>
          <span>新闻中心</span>
        </h3>
        <p>最新行业新闻资讯</p>
        <el-row :gutter='10'>
          <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" v-for='item in 3' :key='item'>
            <div class="news_img">
              <img :src="newsImg">
            </div>
            <ul class="news_count clearfix">
              <li>
                <span>admin</span>
              </li>
              <li>
                <i class="el-icon-view"></i>
                <span>335</span>
              </li>
            </ul>
            <div class="news_description">
              <h2>全球原木材原料严重紧缺危及建材行业</h2>
              <p>众所周知，海啸给中国地板、家具行业的影响正在逐步显现。由于印尼等国实行出口紧缩政策，使全球原木材原料供给吃紧，国内那些过分依靠海外采购原木材的下游企业将面临难关..</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="yz_partner">
      <div class="partner_container">
        <h3>
          <span>合作伙伴</span>
        </h3>
        <p>欢迎更多公司成为我们的合作伙伴</p>
        <el-row :gutter="10">
          <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="4" v-for='item in 12' :key='item'>
            <a href="#"  class="partner_link">
              <img :src='partnerImg'>
            </a>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      carousel: 'url(' + require("../assets/0cdc888f951097a5fd1f10ca.jpg") + ')',
      carousel_2: require('../assets/0cdc888f951097a5fd1f10ca.jpg'),
      aboutImg:"url("+require('../assets/aboutbg.jpg')+")",
      services: {
        img: require('../assets/1474115103.jpg'),
        title: "精装修房",
        msg: "本设计从现在人的角度，以现在手法融合东方古典美学，天人合一的居住理念，结合客户审美取向，空间灯具，家私及饰品相当另类。汇聚东方文化的宽阔气度，打造崭新的新东方主义，放眼国际的顶级居住空间。更置中国人的"
      },
      newsImg: require('../assets/1474096485.jpg'),
      partnerImg:require('../assets/1474294620.png')
    }
  }
}

</script>
<style lang='scss'>
$sectionPadding:50px 0px 40px 0;
@mixin sectionSet {
  @include maxWidthMargin0;
  &>h3 {
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center;
    span {
      position: relative;
      color: #2a333c;
      &::after {
        background: #d68b37 none repeat scroll 0 0;
        content: "";
        height: 3px;
        width: 30%;
        left: 35%;
        top: 35px;
        position: absolute;
      }
    }
  }
  &>p {
    color: #666;
    font-size: 16px;
    text-align: center;
    margin-bottom: 47px;
  }
}

.page {
  .carousel_img {
    background-size: cover;
    height: 100%;
    background-position: center center;
  } // .el-carousel__item h3 {
  //   color: #475669;
  //   font-size: 18px;
  //   opacity: 0.75;
  //   line-height: 300px;
  //   margin: 0;
  // }
  // content
  .yz_body {
    padding: $sectionPadding;
    .services {
      @include sectionSet;
      .services_box {
        height: auto;
        float: left;
        padding: 20px;
        margin-bottom: 15px;
        background: #f4f6f8;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        cursor: pointer;
        &:hover {
          background: #D68B37;
          .content {
            h4 {
              color: #fff;
            }
            p {
              color: #fff;
            }
          }
        }
        .content {
          overflow: hidden;
          h4 {
            font-size: 18px;
            font-weight: 600;
            line-height: 18px;
            margin-bottom: 16px;
          }
          p {
            color: #666;
            font-size: 14px;
            text-align: left;
          }
        }
      }
      .services_img {
        background: #fff;
        padding: 8px;
        margin-right: 30px;
        float: left;
        margin-top: 3px;
      }
    }
  }
  .yz_about {
    width: 100%;
    background-color: #1b1b1b;
    .left_side {
      height: 510px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      float: left;
    }
    .right_side {
      float: right;
      padding-top: 10px;
      height: auto;
      .about_us {
        padding-left: 60px;
        h2 {
          font-weight: 700;
          font-size: 1.625em;
          color: #fff;
          position: relative;
          padding-top: 47px;
          word-spacing: 6px;
          padding-bottom: 38px;
          &::before {
            content: '';
            width: 45px;
            height: 3px;
            background: #d68b37;
            position: absolute;
            top: 85px;
          }
        }
        p {
          text-indent: 2em;
          color: #bcc1c7;
          width: 72%;
        }
      }
    }
  }
  .yz_product {
    padding: $sectionPadding;
    .product_container {
      @include sectionSet; // 跑马灯
      .el-carousel__container {
        height: 328px;
        .product_img {
          width: 100%;
          img {
            display: block;
            width: 100%;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
            cursor: pointer;
            &:hover {
              transform: scale(1.2)
            }
          }
        }
      }
    }
  }
  .yz_news {
    padding: $sectionPadding;
    background-color: #F5F5F5;
    .news_container {
      @include sectionSet;
      .news_img {
        cursor: pointer;
        img {
          display: block;
          margin: 0 auto;
        }
      }
      .news_count {
        border-bottom: 1px solid #E1E1E1;
        padding: 7px 0px;
        margin-bottom: 30px;
        li {
          float: left;
          i {
            font-weight: bold;
          }
          span {
            display: inline-block;
            line-height: 16px;
            padding: 0 12px;
            color: #9A9A99;
            font-weight: 500;
          }
          &:last-child {
            border-left: 1px solid #ccc;
            padding-left: 10px;
          }
        }
      }
      .news_description {
        h2 {
          color: #242424;
          font-size: 18px;
          font-weight: bold;
        }
        p {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          color: #898989;
          font-weight: 500;
          margin: 15px 0 0;
        }
      }
    }
  }
  .yz_partner {
    padding: $sectionPadding;
    .partner_container {
      @include sectionSet;
      .partner_link{
        display:block;
        width:100%;
        border: 1px solid #e1e3e5;
        margin-bottom:5px;
        img{
          width:100%;
        }
      }
    }
  }
}

</style>
